import React from 'react';
import APPOverview from './component/card';
import InfoBox from './component/infobox';
import styled from 'styled-components';

export const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 25%); // 纵4
  grid-template-rows: repeat(5, 160px); // 行5
  grid-auto-flow: row;
  min-width: 1080px;
  width: calc(100% + 40px);
  margin-left: -20px;
`;
export default function Dashboard() {
  return (
    <div>
      <GridContainer>
        <InfoBox row={1} rowSpan={2} title={'grid布局'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox row={1} rowSpan={2} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox colSpan={2} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox colSpan={2} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox rowSpan={2} colSpan={4} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox rowSpan={1} colSpan={1} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
        <InfoBox rowSpan={1} colSpan={1} title={'主界面'}>
          <APPOverview
            info={{
              countTotal: 10,
              durationTotal: 2,
              countDay: 0,
              durationDay: 3
            }}
            infoType="total"
          />
        </InfoBox>
      </GridContainer>
    </div>
  );
}
